<template>
  <div class="detail-info">
    <template v-if="isHavePatent">
      <div class="nav">
        <div
          v-for="(item, index) in nav"
          :key="index"
          class="nav-item"
          :class="{ active: active === index }"
        >
          <template v-if="item.children && item.children.length > 0">
            <p>{{ item.label }}<i class="down-icon el-icon-arrow-down"></i></p>
            <div class="menu-box">
              <el-menu
                class="nav-menu"
                text-color="#86899e"
                active-text-color="#504da6"
              >
                <el-menu-item v-for="(ite, ind) in item.children" :key="ind">
                  <span
                    slot="title"
                    @click="change(ite, index)"
                    class="nav-menu-title"
                    :class="{
                      'nav-menu-title-active': activeRouterName === ite.router,
                    }"
                    >{{ ite.label }}</span
                  >
                </el-menu-item>
              </el-menu>
            </div>
          </template>
          <template v-else>
            <p @click="change(item, index)">{{ item.label }}</p>
          </template>
        </div>
      </div>
      <div class="bbox">
        <router-view class="animate__animated" :class="animateClass" />
      </div>
    </template>
    <template v-else>
      <p style="text-align:center;font-size:18px;">
        未发现此公司的科技信息，请查看其他信息。
      </p>
    </template>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  data() {
    return {
      isHavePatent: "", // 公司是否有专利
      nav: [],
      active: 0,
      activeRouterName: "",
      animateClass: "",
    };
  },
  methods: {
    change(item, index) {
      // this.active = index
      this.$router.push({
        name: item.router,
      });
    },
    setNav() {
      this.nav = [
        {
          label: this.$t("assessment.TechnicalOverview"),
          children: [
            {
              label: this.$t("assessment.TechnicalOverview"),
              router: "technologyOverview",
            },
            {
              label: this.$t("assessment.TechnicalAnalysis"),
              router: "technicalAnalysis",
            },
          ],
        },
        {
          label: "科研情况",
          children: [
            {
              label: "科研成果",
              router: "patentList",
            },
         
            {
              label: this.$t("assessment.PatentOperation"),
              router: "highValueMining",
            },
          ],
        },
        {
          label: this.$t("assessment.coreTeam"),
          router: "coreTeam",
        },
        // 新需求要求隐藏改功能
        // {
        //   label: this.$t("assessment.TechnicalComparison"),
        //   router: "technicalComparison",
        // },
      ];
    },
  },
  watch: {
    $route(to, from) {
      this.active = to.meta.index || 0;
      this.activeRouterName = to.name;
      // if (to.meta.index >= from.meta.index) {
      //   this.animateClass = 'animate__slideInRight'
      // } else {
      //   this.animateClass = 'animate__slideInLeft'
      // }
    },
    "$store.state.lang"() {
      this.setNav();
    },
  },
  beforeMount() {
    this.setNav();
    // 判断是否有专利
    if (this.$cookie.get("isHavePatent") === "false") {
      this.isHavePatent = false;
      return;
    } else {
      this.isHavePatent = true;
    }
    this.active = this.$route.meta.index || 0;
    this.activeRouterName = this.$route.name;
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.detail-info {
  padding: 20px;
}
.nav {
  position: relative;
  display: flex;
  width: 100%;
  margin-bottom: 20px;
  .nav-item {
    position: relative;
    flex: 1;
    line-height: 50px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: #7674a3 !important;
    background-color: #fff;
    cursor: pointer;
    &:hover {
      .menu-box {
        display: block;
      }
    }
    &.active {
      opacity: 1 !important;
      color: #fff !important;
      background-color: $mainColor !important;
    }
    &:first-of-type {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }
    &:last-of-type {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
    p {
      margin-bottom: 0;
      .down-icon {
        padding-left: 4px;
        font-weight: bold;
      }
    }
    .menu-box {
      position: absolute;
      top: 50px;
      z-index: 2;
      display: none;
      width: 100%;
      .nav-menu {
        position: relative;
        width: 100%;
        margin-top: 14px;
        font-size: 14px;
        font-weight: bold;
        border: 0;
        box-sizing: border-box;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        &.active {
          display: block;
        }
        &:before {
          position: absolute;
          top: -9px;
          left: 50%;
          display: block;
          width: 0;
          height: 0;
          border-color: transparent;
          border-width: 10px;
          border-top-width: 0;
          border-bottom-color: #fff;
          border-style: solid;
          margin-left: -10px;
          content: " ";
        }
        .nav-menu-title {
          display: block;
          width: 100%;
          line-height: 50px;
        }
        .nav-menu-title-active {
          color: $mainColor !important;
        }
      }
    }
  }
}
.bbox {
  overflow: hidden;
}
</style>
